<template>
  <div id="container">
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8"
          ><el-input placeholder="输入导演名进行搜索" clearable>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加导演</el-button>
        </el-col>
      </el-row>
      <!-- stripe隔行变色 -->
      <el-table :data="directorList" :border="true" stripe :resizable="false">
        <el-table-column
          type="index"
          fixed
          :resizable="false"
        ></el-table-column>
        <el-table-column label="照片" width="100" prop="directorPhoto">
          <template v-slot="scope">
            <img
              style="width: 83px; height: 122px"
              :src="scope.row.directorPhoto"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="directorName"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" :resizable="false" align="center">
          <template v-slot="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="showEditDialog(scope.row.directorId)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="prev, pager, next, jumper,total,sizes"
        :total="total"
 
      >
      </el-pagination> -->
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      directorList: [],
    };
  },
  created() {
    this.getDirectorList();
  },
  methods: {
    async getDirectorList() {
      const { data: res } = await this.$http.get(
        "common/director/getDirectorList"
      );
      if (res.code != 200) {
        return this.message.error(res.message);
      } else {
        this.directorList = res.data;
      }
    },
    showEditDialog(id) {
      this.$router.push({ path: "/editDirector", query: { id: id } });
    },
  },
};
</script>
<style lang="less" scoped>
</style>